<!-- eslint-disable max-len -->
<template>
  <h4>用户列表</h4>
  <el-row :gutter="20">
    <el-col :span="3"></el-col>
    <el-col :span="15">
      <div class="mt-4">
        <el-input placeholder="请输入关键字" v-model="search" class="input-with-select"></el-input>
      </div>
    </el-col>
    <el-col :span="3">
      <el-button type="primary">点击搜索</el-button>
    </el-col>
    <el-col :span="3"></el-col>
  </el-row>

  <el-skeleton class="ske" :loading="loading" :rows="5" animated>
    <template #default>
      <el-table border :data="newList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        style="width: 100%; margin-top: 50px;">
        <el-table-column label="用户ID" prop="id" width="180" align="center" />
        <el-table-column label="用户名" prop="username" width="180" align="center" />
        <el-table-column label="性别" prop="sex" width="90" align="center" />
        <el-table-column label="手机" prop="telephone" width="180" align="center" />
        <el-table-column label="个人签名" prop="sign" width="450" align="center" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageS" :small="small"
        :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="newList.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </template>
  </el-skeleton>

  <Dialog @get-list="getList"></Dialog>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import Dialog from './Dialog.vue'
import http from '../util/api'

const loading = ref(true)
const store = useStore();

const search: any = ref('');

// 当前页数
const currentPage = ref(1);
// 每页显示条数

const pageS = ref([5, 10, 15, 20])
const pageSize: any = ref(5)
// pageSize.value = pageS.value
watch(
  () => pageSize.value,
  () => {
    localStorage.setItem('pageS', pageSize.value)
    pageSize.value = Number(localStorage.getItem('pageS'))
    handleSizeChange(pageSize.value)
  }
)

const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// page-size改变时触发
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
// current-page改变时触发
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};

// 编辑
const handleEdit = (val: any) => {
  store.commit('changeDialog');
  store.commit('showEdit', val);
};

// 接收表格数据
const userList: any = ref([]);

onMounted(() => {
  getList()
  // localStorage.setItem('pageS', pageSize.value)
  if(localStorage.getItem('pageS')){
    pageSize.value = Number(localStorage.getItem('pageS'))
  }else {
    pageSize.value
  }
  console.log(pageSize.value)
});
const getList = () => {
  http('/userlist').then((res: any) => {
    // console.log(res.data)
    userList.value = res.data
    // console.log(userList.value.length);
    if (userList.value.length > 0) {
      loading.value = false
    }
  });
};

// 删除信息
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确认删除该信息吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      http(`/userlist/${row.id}`, 'delete').then((res: any) => {
        if (res.status === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
          getList();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败！',
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消！',
      });
    });
};
// 监听搜索框的变化，展示搜索出来的数据
// eslint-disable-next-line max-len
const newList = computed(() => {
  // console.log(userList.value.length)
  // return userList.value.filter((item: any) => item.username.toLowerCase().includes(search.value.toLowerCase()))
  return userList.value.filter((item: any) => item.username.toLowerCase().includes(search.value.toLowerCase()));
})

</script>

<style scoped>
h4 {
  color: azure;
}

.input-with-select {
  background-color: var(--el-fill-color-blank);
}

.ske {
  width: 90%;
  margin: 50px auto;
}
</style>
